<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户管理</title>
    <link rel="stylesheet" href="frame/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="iconfont/iconfont.css">
    <link rel="stylesheet" href="css/common.css" media="all">
    <link rel="stylesheet" href="css/user.css" media="all">
</head>
<body>
    <div class="wrapper">
        <div class="user-header">
            <ul class="selected-condition01 clearfix">
                <li>
                    <span>登录名称：</span>
                    <input type="text"/>
                </li>
                <li>
                    <span>登录名称：</span>
                    <input type="text"/>
                </li>
            </ul>
            <ul class="selected-condition02 clearfix">
                <li class="user-state">
                    <span>用户状态：</span>
                     <div class="user-state-selet">
                        <form class="layui-form" action="" lay-filter="userStatus">
                            <div class="layui-form-item">
                                <div class="layui-input-inline expire-city">
                                    <select class="user-status" lay-filter="userS" name="userStat">
                                        <option value="0">所有</option>
                                        <option value="1">普通</option>
                                        <option value="2">特技</option>
                                    </select>
                                </div>
                            </div>
                        </form>  
                    </div>
                </li>
                <li class="create">
                    <span>创建时间：</span>
                    <div class="createShijian layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="createTime1" placeholder="开始时间" lay-key="1">
                        </div>
                        <u>-</u>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="createTime2" placeholder="结束时间" lay-key="2">
                        </div>
                    </div>
                </li>
                <li class="btn-selected">
                    <button class="search-btn">搜索</button>
                    <button class="downLoad-btn">下载</button>
                </li>
            </ul>
        </div>

        <div class="user-main">
            <div class="user-main-header clearfix">
                <div class="fl operate">
                    <span class="added"><i class="iconfont icon-icon"></i>新增</span>
                    <span class="delete"><i class="iconfont icon-shanchu"></i>删除</span>
                </div>
                <div class="fl forbidden-btn">批量禁用</div>
            </div>
            <!-- tabal -->
            <div class="usertable">
                <table class="layui-table">
                    <thead>
                        <tr>
                            <th><i class="iconfont iconxuanweixuan icon-weigouxuan"></i></th>
                            <th>用户ID</th>
                            <th>登录名称</th>
                            <th>用户名称</th>
                            <th>部门</th>
                            <th>手机</th>
                            <th>状态</th>
                            <th>创建时间</th>
                            <th style="text-align: center;">操作</th>
                        </tr> 
                    </thead>
                    <tbody>
                        <tr>
                            <td class="icon-td"><i class="iconfont iconxuanweixuan icon-weigouxuan"></i></td>
                            <td>511</td>
                            <td>admin</td>
                            <td>马化腾</td>
                            <td>董事会</td>
                            <td>188888888</td>
                            <td class="td-state">
                                <span>正常</span>
                            </td>
                            <td>2018-08-10 18:20</td>
                            <td class="td-opeate">
                                <span><i class="iconfont icon-bianji"></i>编辑</span>
                                <span  class="users-deletes"><i class="iconfont icon-delete2"></i>删除</span>
                                <span><i class="iconfont icon-zhongzhi"></i>重置</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="icon-td"><i class="iconfont iconxuanweixuan icon-weigouxuan"></i></td>
                            <td>511</td>
                            <td>admin</td>
                            <td>马化腾</td>
                            <td>董事会</td>
                            <td>188888888</td>
                            <td class="td-state">
                                <span>正常</span>
                            </td>
                            <td>2018-08-10 18:20</td>
                            <td class="td-opeate">
                                <span><i class="iconfont icon-bianji"></i>编辑</span>
                                <span  class="users-deletes"><i class="iconfont icon-delete2"></i>删除</span>
                                <span><i class="iconfont icon-zhongzhi"></i>重置</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="icon-td"><i class="iconfont iconxuanweixuan icon-weigouxuan"></i></td>
                            <td>511</td>
                            <td>admin</td>
                            <td>马化腾</td>
                            <td>董事会</td>
                            <td>188888888</td>
                            <td class="td-state">
                                <span>正常</span>
                            </td>
                            <td>2018-08-10 18:20</td>
                            <td class="td-opeate">
                                <span><i class="iconfont icon-bianji"></i>编辑</span>
                                <span class="users-deletes"><i class="iconfont icon-delete2"></i>删除</span>
                                <span><i class="iconfont icon-zhongzhi"></i>重置</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="pages talbe-posi" id="annual-table"></div>
            </div>
        </div>
    </div>
</body>
<!-- 新增 -->
<div id="added--edit-user">
    <div class="added--edit-user-class">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">登录名称：</label>
                <div class="layui-input-block">
                    <input type="text" name="loginName" required  lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">部门名称：</label>
                <div class="layui-input-block">
                    <input type="text" name="sectionName" required  lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户名称：</label>
                <div class="layui-input-block">
                    <input type="text" name="userName" required  lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码：</label>
                <div class="layui-input-block">
                    <input type="password" name="userpassword" required  lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱：</label>
                <div class="layui-input-block">
                    <input type="text" name="email" required  lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机：</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" required  lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别：</label>
                <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男" checked>
                <input type="radio" name="sex" value="女" title="女">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">岗位：</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" required  lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="" title="管理员" lay-skin="primary">
                    <input type="checkbox" name="" title="普通角色" lay-skin="primary"> 
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" src="frame/jquery.min.js"></script>
<script type="text/javascript" src="frame/layui/layui.js"></script>
<script type="text/javascript">
layui.use(['layer', 'form', 'laydate', 'laypage'], function() {
    var layer = layui.layer,
        laypage = layui.laypage,
        form = layui.form;
    var laydate = layui.laydate;

    // 创建时间
    laydate.render({
        elem: '#createTime1',
        theme: '#1c84c6',
    
    });
    laydate.render({
        elem: '#createTime2',
        theme: '#1c84c6',
    });


    // 分页
    laypage.render({
        elem: 'annual-table'
        ,count: 30,
        limit: 5,
        theme: '#1c84c6',
        layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
        jump: function(obj){
     
        }
    });
    // 新增用户
    $('.added').on('click', function() {
        layer.open({
            title: '添加用户',
            maxmin: true,
            type: 1,
            content: $('#added--edit-user'),
            area: ['60%', '90%']
            ,btn: ['提交', '关闭']
            ,yes: function(index, layero){
               
                // layer.close(index);
            }
            ,btn2: function(index, layero){
                //按钮【按钮二】的回调
                // return false
            }
            ,cancel: function(){ 
                //右上角关闭回调
                
                //return false 开启该代码可禁止点击该按钮关闭
            }
            ,btnAlign: 'r'
            ,resize: false
        });
    });
    // 删除
    $(document).on('click', '.users-deletes', function(){
        layer.open({
            title: '提示',
            content: '是否删除？',
            btn: ['确认', '否'],
            yes: function(index, layero){
                //do something
                layer.close(index); //如果设定了yes回调，需进行手工关闭
                
            },
            btn2: function(index, layero){
                layer.close(index);
            },
            cancel: function(index, layero){ 
                layer.close(index);
            }    
        }); 
    })

    var g_set_cho = $('.usertable table thead .iconxuanweixuan');   // 全选功能
    // 单选功能
    var g_choice = function (obj) {
        if (obj.is('.icon-yigouxuan')) {
            obj.removeClass('icon-yigouxuan').addClass('icon-weigouxuan');
        } else {
            obj.removeClass('icon-weigouxuan').addClass('icon-yigouxuan');
        }
    };
    // 点击勾选
    $(document).on('click', '.usertable table tbody .iconxuanweixuan', function (event) {
        event.stopPropagation();
        g_choice($(this));
        var m_wx = $('.usertable table tbody .icon-yigouxuan').length;
        var m_if = $('.usertable table tbody .iconxuanweixuan').length;
        if (m_wx < m_if) {
            g_set_cho.removeClass('icon-yigouxuan').addClass('icon-weigouxuan');
        } else {
            g_set_cho.removeClass('icon-weigouxuan').addClass('icon-yigouxuan');
        }
    
    });
    // 全选
    g_set_cho.on('click', function () {
        g_choice($(this));
        var m_cls = $(this).attr('class');
        $('.usertable table tbody .iconxuanweixuan').each(function () {
            $(this).removeClass().addClass(m_cls);
        });
    });
    
});
</script>
</html>